<template>
  <a-modal
    :visible="uploadVisible"
    title="导入数据"
    @cancel="() => { $emit('close') }"
    :width="800"
  >
    <a-card :bordered="false" style="display:flex;justify-content: center">
      <div style="width: 508px">
        <h1>温馨提示：</h1>
        <h2> 1、仅支持dbf格式文件，推荐使用<a href="javascript:;" style="color:red" @click="downloadTemplate">标准模板</a>导入数据。</h2>
        <h2>2、导入dbf数据是全覆盖模式，以最新一次为准。</h2>
      </div>
    </a-card>

    <a-row>
      <a-col :span="4"></a-col>
      <a-col :span="6">
        <a-upload
          name="file"
          :action="uploadUrl"
          :showUploadList=true
          :beforeUpload="this.beforeUpload"
          :headers="{
              Authorization: $store.state.account.token
            }"
        >
          <a-button type="primary" size="large">选择文件</a-button>
        </a-upload>
      </a-col>
    </a-row>
    <a-row slot="footer" style="display: flex;justify-content: space-around">
      <a-button :loading="confirmLoading" @click="handleImport" type="primary" size="large"> 确认导入</a-button>
      <a-button @click="closeUpload" size="large">关闭</a-button>
    </a-row>
  </a-modal>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    props: ['uploadVisible'],
    data() {
      return {
        confirmLoading: false,
        uploadUrl: `${process.env.SERVICE_URL}admissions/kdap/upload`,
        chooseFiles: null
      }
    },
    beforeCreate() {
      this.form = this.$form.createForm(this)

    },
    computed: {
      ...mapState({})
    },
    created() {
    },
    methods: {
      downloadTemplate() {
        this.$api.examPlan.downloadTemplate()
      },
      beforeUpload(file) {
        this.chooseFiles = file;
        return false;
      },
      // 导入
      handleImport() {
        if (!this.chooseFiles) {
          this.$message.error('请选择文件')
          return;
        }
        const formData = new FormData()
        formData.append('file', this.chooseFiles)
        this.confirmLoading = true
        this.$upload('admissions/kdap/upload', formData).then(res => {
          this.confirmLoading = false
          this.$message.success('导入成功')
          this.closeUpload();
        })
      },
      closeUpload() {
        this.$emit('closeUpload')
      }
    }
  }
</script>
